import React, { useState, useEffect } from 'react';
import { Modal, Button, message, Input, Form, Image } from 'antd';
import { getGoodsAdd, getGoodsUpdate, getGoodsDetail } from '../../api/goods'
import type { GoodsAddOrEditProps, } from '../../types/goods'
import UploadComponent from '../../components/UploadComponent/index'

const GoodsAdd: React.FC<GoodsAddOrEditProps> = ({ visible, onClose, onRefresh, id }) => {
  const { TextArea } = Input;
  const [localVisible, setLocalVisible] = useState(visible);
  const [title, setTitle] = useState<string>('');
  const [goodsimg, setGoodsimg] = useState<string>('');
  const [goodsname, setGoodsname] = useState<string>('')
  const [goodsdesc, setGoodsdesc] = useState<string>('')
  const [goodsprice, setGoodsprice] = useState<number>(0)
  const [goodsnum, setGoodsnum] = useState<number>(0)
  const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
  const [form] = Form.useForm();

  useEffect(() => {
    setLocalVisible(visible);
    if (!id) {
      setTitle('新增商品')
      setGoodsimg('')
      form.resetFields()
    } else {
      setTitle('修改商品')
      getGoodsDetail({
        id: id
      }).then((res: any) => {
        if (res.data.code === 200) {
          setTitle('修改商品')
          setGoodsname(res.data.data.goodsname)
          setGoodsimg(res.data.data.goodsimg)
          setGoodsdesc(res.data.data.goodsdesc)
          setGoodsprice(res.data.data.goodsprice)
          setGoodsnum(res.data.data.goodsnum)
          form.setFieldsValue({
            goodsname: res.data.data.goodsname,
            goodsimg: res.data.data.goodsimg,
            goodsdesc: res.data.data.goodsdesc,
            goodsprice: res.data.data.goodsprice,
            goodsnum: res.data.data.goodsnum
          });
        }
      })
    }
  }, [visible]);

  const handleOk = () => {
    try {
      setConfirmLoading(true);
      if (id) {
        getGoodsUpdate({
          id: id,
          goodsname,
          goodsimg,
          goodsdesc,
          goodsprice,
          goodsnum
        }).then((res: any) => {
          if (res.data.code === 200) {
            message.success(res.data.message);
            setConfirmLoading(false);
            setLocalVisible(false);
            onClose();
            onRefresh(); // 调用父组件传递的回调函数
          } else {
            message.error(res.data.message);
            setConfirmLoading(false);
          }
        })
      } else {
        getGoodsAdd({
          goodsname,
          goodsimg,
          goodsprice: Number(goodsprice),
          goodsnum: Number(goodsnum),
          goodsdesc
        }).then((res: any) => {
          if (res.data.code === 200) {
            message.success(res.data.message);
            setConfirmLoading(false);
            setLocalVisible(false);
            onClose();
            onRefresh(); // 调用父组件传递的回调函数
          } else {
            message.error(res.data.message);
            setConfirmLoading(false);
          }
        })
      }
    } catch (err: any) {
      message.error(err);
    }
  };

  const handleCancel = () => {
    setLocalVisible(false);
    onClose();
  };

  const handleUploadSuccess = (url: string) => {
    setGoodsimg(url);
  };
  return (
    <div>
      <Modal style={{ top: 40 }} width={600} title={title} open={localVisible} onOk={handleOk} onCancel={handleCancel} confirmLoading={confirmLoading} footer={
        [
          <Button key="cancel" onClick={handleCancel}>取消</Button>,
          <Button key="confirm" type="primary" onClick={handleOk} loading={confirmLoading}>确认</Button>
        ]
      }>
        <Form layout="horizontal" form={form}>
          <Form.Item label="商品名称" name="goodsname" rules={[{ required: true, message: '请输入商品名称' }]}>
            <Input placeholder="请输入商品名称" value={goodsname} onChange={(e) => setGoodsname(e.target.value)}></Input>
          </Form.Item>
          <Form.Item label="商品价格" name="goodsprice" rules={[{ required: true, message: '请输入商品价格' }]}>
            <Input placeholder="请输入商品价格" type='number' value={goodsprice} onChange={(e: any) => setGoodsprice(e.target.value)}></Input>
          </Form.Item>
          <Form.Item label="商品数量" name="goodsnum" rules={[{ required: true, message: '请输入商品数量' }]}>
            <Input placeholder="请输入商品数量" type='number' value={goodsnum} onChange={(e: any) => setGoodsnum(e.target.value)}></Input>
          </Form.Item>
          <Form.Item label="商品描述" name="goodsdesc" rules={[{ required: true, message: '请输入商品描述' }]}>
            <TextArea placeholder="请输入商品描述" value={goodsdesc} onChange={(e) => setGoodsdesc(e.target.value)}></TextArea>
          </Form.Item>
          <Form.Item label="商品图片" name="goodsimg" rules={[{ required: true, message: '请上传商品' }]}>
            <UploadComponent
              maxCount={1}
              showUploadList={false}
              uploadUrl="/goods/upload"
              typename="file"
              onUploadSuccess={handleUploadSuccess} // 传递回调函数
            />
          </Form.Item>
          {
            goodsimg ? <Form.Item label="商品预览" name="goodsimg">
              <Image width={200} src={goodsimg} />
            </Form.Item> : ''
          }
        </Form>
      </Modal>
    </div>
  )
}

export default GoodsAdd;